<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<form class="layui-form" action="{:url()}" method="post" id="editForm">
    <br>
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input field-username" id="title" name="title" placeholder="标题">
        </div>
    </div>
    <br>

    <div class="layui-form-item">
        <label for="image" class="layui-form-label">
            新闻图片地址:
        </label>
        <div class="layui-input-inline">
            <input type="hidden" id="imgSrc" name="imgSrc" lay-verify="imgSrc" class="layui-input" value="">

            <button type="button" class="layui-btn" id="image" name="image">
                上传新闻图片地址
            </button>
        </div>
    </div>
    <br>
    <div class="layui-form-item" id="myDiv">
        <label for="image" class="layui-form-label" style="color: #b3d271">
            图片预览
        </label>
        <div class="layui-input-inline"></div>
    </div>
    <br>
    <div class="layui-form-item">
        <label for="image" class="layui-form-label">
            头像地址:
        </label>
        <div class="layui-input-inline">
            <input type="hidden" id="avatar" name="avatar" lay-verify="imgSrc" class="layui-input" value="">

            <button type="button" class="layui-btn" id="avatarImg" name="avatarImg">
                上传头像地址
            </button>
        </div>
    </div>
    <br>
    <div class="layui-form-item" id="divMy">
        <label for="image" class="layui-form-label" style="color: #b3d271">
            图片预览
        </label>
        <div class="layui-input-inline"></div>
    </div>
    <br>
    <div class="layui-form-item" >
        <label class="layui-form-label">文章详情</label>
        <div class="layui-input-inline w600"  id="editormd" style="width: 600px;">
            <textarea id="detail" name="detail" lay-verify="main_content" placeholder="请输入" class="layui-textarea"></textarea>
        </div>
    </div>
    <br>
    <div class="layui-form-item">
        <label class="layui-form-label">作者</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input field-username" name="author" id="author" lay-verify="required" placeholder="作者">
        </div>
    </div>
    <br>
    <div class="layui-form-item" style="padding-left: 110px">
        <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="formSubmit" hisi-data="{pop: true, refresh: true}">提交保存</button>
        <a href="javascript:parent.layui.layer.closeAll();" class="layui-btn layui-btn-primary ml10">取消</a>
    </div>

</form>
<script>
    //上传数据
    layui.use(['form','jquery','upload'], function(){
        var $ = layui.jquery
            ,upload = layui.upload
            ,form = layui.form;
        //执行实例
        var uploadInst = upload.render({
            elem: '#image', //绑定元素,
            url: './uploadImage/', //上传接口
            done: function(res){
                console.info(res.data);
                //上传完毕回调
                $("#myDiv").append("<img src='"+ res.data +"' style='width:415px;height:250px'>");
                $("#imgSrc").val(res.data);
            },
            error: function(){
                //请求异常回调
            }
        });
        var uploadSecond = upload.render({
            elem: '#avatarImg', //绑定元素,
            url: './uploadImage/', //上传接口
            done: function(res){
                console.info(res.data);
                //上传完毕回调
                $("#divMy").append("<img src='"+ res.data +"' style='width:100px;height:80px'>");
                $("#avatar").val(res.data);
            },
            error: function(){
                //请求异常回调
            }
        });

        layui.use('layedit', function(){
            var layedit = layui.layedit;
            layedit.build('detail'); //建立编辑器
        });

        form.on("submit(formSubmit)",function(data){
            layer.msg('信息提交中...', {
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
            }, function(){
                $.ajax({
                    url:"{:url('add')}",
                    type:"POST",
                    data:data.field,
                    dataType:"JSON",
                    success (res) {
                        //console.info(res);
                        layer.msg(res.message);
                        setTimeout(function(){
                            layer.closeAll();
                            if (res.code === 1){
                                var index = parent.layer.getFrameIndex(window.name);//关闭当前页面
                                window.parent.location.reload();
                                parent.layer.close(index);
                            }
                        },1000);
                    }
                })
            });
            return false;
        })
    });
</script>

</body>
</html>